<template>
  <div class="container-auditDetails">
    <el-row>
      <!-- 驳回弹出框 -->
      <el-dialog title="驳回原因"
                 width="40%"
                 :close-on-click-modal="false"
                 :visible.sync="dialogFormVisible">
        <el-form :model="formReject"
                 ref="formReject"
                 :rules="rulesReject"
                 :inline="true"
                 label-width="90px">
          <el-form-item label="驳因内容"
                        class="reject-style"
                        prop="content">
            <el-input v-model="formReject.content"
                      type="textarea"></el-input>
          </el-form-item>
        </el-form>
        <div class="bottom-reject-style">
          <el-button @click="onRefuseCanc"
                     class="header-search">取 消</el-button>
          <el-button type="primary"
                     class="header-search"
                     @click="onRefuseSure('formReject')">确 定</el-button>
        </div>
      </el-dialog>

      <el-form :model="form"
               ref="form"
               :inline="true"
               label-width="180px"
               :rules="rules">
        <el-col :span="24">
          <el-col :span="24"
                  style="margin-bottom:20px;">
            <span>审核详情</span>
          </el-col>
          <el-col :span="24">
            <el-collapse v-model="activeNames"
                         @change="handleActiveChange">
              <el-collapse-item title="基本信息"
                                name="1">
                <el-col :span="24">
                  <el-col :span="12">
                    <el-form-item label="单位名称"
                                  class="header-unitname">
                      <el-input v-model="form.unitName"
                                :disabled="true"></el-input>
                    </el-form-item>
                    <el-form-item label="联系人"
                                  class="header-unitname">
                      <el-input v-model="form.contactName"
                                :disabled="true"></el-input>
                    </el-form-item>
                    <el-form-item label="联系电话"
                                  class="header-unitname">
                      <el-input v-model="form.contactPhone"
                                :disabled="true"></el-input>
                    </el-form-item>
                    <el-form-item label="邮箱地址"
                                  class="header-unitname">
                      <el-input v-model="form.mail"
                                :disabled="true"></el-input>
                    </el-form-item>
                    <el-form-item label="统一社会信用代码"
                                  class="header-unitname">
                      <el-input v-model="form.creditCode"
                                :disabled="true"></el-input>
                    </el-form-item>
                    <el-form-item label="营业执照"
                                  class="header-unitname">
                      <el-upload class="avatar-uploader"
                                 action=""
                                 :disabled="true"
                                 :on-success="handleAvatarSuccess"
                                 :http-request="uploadFileCreadit"
                                 multiple
                                 :show-file-list="false"
                                 name="pictureFileCreadit"
                                 accept=".jpg,.png">
                        <img v-if="form.creditImgUrl"
                             :src="form.creditImgUrl"
                             class="avatar">
                        <i v-else
                           class="el-icon-plus avatar-uploader-icon"></i>
                      </el-upload>
                    </el-form-item>

                  </el-col>
                </el-col>

              </el-collapse-item>
              <el-collapse-item title="详细信息"
                                name="2">
                <el-col :span="24">
                  <el-col :span="12">
                    <el-form-item label="单位地址"
                                  class="header-unitname">
                      <el-input v-model="form.addr"
                                :disabled="true"></el-input>
                    </el-form-item>
                    <el-form-item label="法人姓名"
                                  class="header-unitname">
                      <el-input v-model="form.legalName"
                                :disabled="true"></el-input>
                    </el-form-item>
                    <el-form-item label="法人证件类型"
                                  class="header-unitname">
                      <el-input v-model="form.legalCardType"
                                :disabled="true"></el-input>
                    </el-form-item>
                    <el-form-item label="法人证件号码"
                                  class="header-unitname">
                      <el-input v-model="form.legalCardNo"
                                :disabled="true"></el-input>
                    </el-form-item>
                  </el-col>
                </el-col>
              </el-collapse-item>
              <el-collapse-item title="其它信息"
                                name="3">
                <el-col :span="24">
                  <el-col :span="12">
                    <el-form-item label="业务范围"
                                  class="header-unitname">
                      <el-input v-model="form.bussi_type"
                                :disabled="true"></el-input>
                    </el-form-item>
                    <el-form-item label="独立域名"
                                  class="header-unitname">
                      <el-input v-model="form.ind_domain"
                                :disabled="true"></el-input>
                    </el-form-item>
                    <el-form-item label="LOGO"
                                  class="header-unitname">
                      <el-upload class="avatar-uploader"
                                 action=""
                                 :disabled="true"
                                 :on-success="handleAvatarSuccess"
                                 :http-request="uploadFile"
                                 multiple
                                 name="pictureFile"
                                 accept=".jpg,.png">
                        <img v-if="form.companyLogoUrl"
                             :src="form.companyLogoUrl"
                             class="avatar">
                        <i v-else
                           class="el-icon-plus avatar-uploader-icon"></i>
                      </el-upload>
                    </el-form-item>
                    <el-form-item label="形象图片"
                                  class="header-unitname">
                      <el-upload class="avatar-uploader"
                                 action=""
                                 :disabled="true"
                                 :on-success="handleAvatarSuccess"
                                 :http-request="uploadFileImage"
                                 multiple
                                 :show-file-list="false"
                                 name="pictureFileImage"
                                 accept=".jpg,.png">
                        <img v-if="form.imagePictureUrl"
                             :src="form.imagePictureUrl"
                             class="avatar">
                        <i v-else
                           class="el-icon-plus avatar-uploader-icon"></i>
                      </el-upload>
                    </el-form-item>
                  </el-col>
                </el-col>
              </el-collapse-item>

            </el-collapse>

          </el-col>

          <el-col :span="24"
                  class="footer-margin">
            <el-button @click="onAuditePass('form')"
                       class="header-search">审核通过</el-button>
            <el-button @click="onBack"
                       class="header-search">驳回</el-button>
          </el-col>
        </el-col>
      </el-form>
    </el-row>
  </div>
</template>
<script>
import { UnitAuditApi } from "@/services/orgainzeManage"
export default {
  data () {
    return {
      activeNames: ['1', '2', '3'],
      company_id: this.$route.query.company_id,
      type: '',
      formReject: {
        content: ''
      },
      rulesReject: {
        content: [
          { required: true, message: '驳回内容不能为空', trigger: 'blur' }
        ]
      },
      dialogFormVisible: false,
      form: {
        ind_domain: '',
        bussi_type: '',
        legalCardNo: '',
        legalCardType: '',
        legalName: '',
        addr: '',
        creditCode: '',
        mail: '',
        contactPhone: '',
        contactName: '',
        unitName: '',
        creditImgUrl: '',//营业图片
        creditImgUrlRelat: '',//营业图片-相对
        companyLogoUrl: '',//logo图片,
        companyLogoUrlRelat: '',//logo图片-相对
        imagePictureUrl: '',//形象图片
        imagePictureUrlRelat: '',//形象图片-相对
      },
      rules: {
        unitName: [
          { required: true, message: '单位名称不能为空', trigger: 'blur' }
        ],
        contactName: [
          { required: true, message: '联系人不能为空', trigger: 'blur' }
        ],
        contactPhone: [
          { required: true, message: '联系电话不能为空', trigger: 'blur' }
        ],
        mail: [
          { required: true, message: '邮箱地址不能为空', trigger: 'blur' }
        ],
        creditImgUrl: [
          { required: true, message: '执业营照不能为空', trigger: 'blur' }
        ],
        creditCode: [
          { required: true, message: '统一社会信用代码不能为空', trigger: 'blur' }
        ]
      },
      imageUrl: '',
    }
  },
  methods: {
    //折叠板
    handleActiveChange (va) {
      console.log(va)
    },
    //驳回原因-返回
    onRefuseCanc () {
      this.formReject.content = '';
      this.dialogFormVisible = false;
    },
    //驳回原因-确定
    onRefuseSure (data) {
      this.type = 2;
      this.$refs[data].validate((valid) => {
        if (valid) {
          UnitAuditApi.updateCheckCompany({
            data: {
              company_id: this.$route.query.company_apply_id,
              type: this.type,
              fail_reason: this.formReject.content
            }
          }).then((res) => {
            if (res.code == 0) {
              this.$message.success('操作成功!')
              this.dialogFormVisible = false;
              this.$router.push('/unitAudit')
            }
          }).catch((error) => {
            console.log(error)
          })
        } else {
          console.log('error submit!');
          return false;
        }
      })

    },
    //营业执照图片上传或修改
    uploadFileCreadit (params) {
      const isLt2M = params.file.size / 1024 / 1024 < 2;
      if (!isLt2M) {
        this.$message.error('上传图片大小不能超过 2MB!');
      } else {
        var formData = new FormData();
        //添加图片时用的方法是append
        formData.append("module", 'company');
        formData.append("pic_file_apk[]", params.file);
        UnitAuditApi.uploadFile({
          data: formData
        }).then((res) => {
          if (res.code == 0) {
            this.form.creditImgUrl = res.data.upload_success[0].absolute_url;
            this.form.creditImgUrlRelat = res.data.upload_success[0].relative_url;
          }
        }).catch((error) => {
          console.log(error);
        });
      }
    },
    //logo图片上传或更新
    uploadFile (params) {
      const isLt2M = params.file.size / 1024 / 1024 < 2;
      if (!isLt2M) {
        this.$message.error('上传图片大小不能超过 2MB!');
      } else {
        var formData = new FormData();
        //添加图片时用的方法是append
        formData.append("module", 'company');
        formData.append("pic_file_apk[]", params.file);
        UnitAuditApi.uploadFile({
          data: formData
        }).then((res) => {
          if (res.code == 0) {
            this.form.companyLogoUrl = res.data.upload_success[0].absolute_url;
            this.form.companyLogoUrlRelat = res.data.upload_success[0].relative_url;
          }
        }).catch((error) => {
          console.log(error);
        });
      }
    },
    //形象图片上传或修改
    uploadFileImage (params) {
      const isLt2M = params.file.size / 1024 / 1024 < 2;
      if (!isLt2M) {
        this.$message.error('上传图片大小不能超过 2MB!');
      } else {
        var formData = new FormData();
        //添加图片时用的方法是append
        formData.append("module", 'company');
        formData.append("pic_file_apk[]", params.file);
        UnitAuditApi.uploadFile({
          data: formData
        }).then((res) => {
          if (res.code == 0) {
            this.form.imagePictureUrl = res.data.upload_success[0].absolute_url;
            this.form.imagePictureUrlRelat = res.data.upload_success[0].relative_url;
          }
        }).catch((error) => {
          console.log(error);
        });
      }
    },
    //驳回
    onBack () {
      this.dialogFormVisible = true;
    },
    //审核通过事件
    onAuditePass (data) {
      this.type = 1;
      this.$refs[data].validate((valid) => {
        if (valid) {
          UnitAuditApi.updateCheckCompany({
            data: {
              company_id: this.$route.query.company_apply_id,
              type: this.type,
              fail_reason: ''
            }
          }).then((res) => {
            if (res.code == 0) {
              this.$message.success('操作成功!')
              this.$router.push('/unitAudit')
            }
          }).catch((error) => {
            console.log(error)
          })
        } else {
          console.log('error submit!');
          return false;
        }
      })
    },
    handleAvatarSuccess (res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
    },
    beforeAvatarUpload (file) {
      const isJPG = file.type === 'image/jpeg';
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isJPG && isLt2M;
    },
    //获取单位详细信息
    getUnitInfo () {
      UnitAuditApi.getCompDetail({
        params: {
          company_apply_id: this.$route.query.company_apply_id
        }
      }).then((res) => {
        this.form.legalCardNo = res.data.legal_card_no;
        this.form.legalCardType = res.data.legal_card_type;
        this.form.legalName = res.data.legal_name;
        this.form.addr = res.data.addr;
        this.form.creditCode = res.data.credit_code;
        this.form.mail = res.data.mail;
        this.form.contactPhone = res.data.contact_phone;
        this.form.contactName = res.data.contact_name;
        this.form.unitName = res.data.company_name;
        this.form.ind_domain = res.data.ind_domain;//域名
        this.form.bussi_type = res.data.bussi_type;//业务范围
        this.form.creditImgUrl = res.data.credit_img_url;//营业图片
        this.form.creditImgUrlRelat = res.data.credit_img;//营业图片-相对
        this.form.companyLogoUrl = res.data.company_logo_url;//logo图片
        this.form.companyLogoUrlRelat = res.data.company_logo;//logo图片-相对
        this.form.imagePictureUrl = res.data.image_picture_url;//形象图片
        this.form.imagePictureUrlRelat = res.data.image_picture;//形象图片-相对
        console.log('单位信息=', res)
      }).catch((error) => {
        console.log(error)
      })
    }

  },
  created () {
    //获取单位详细信息
    this.getUnitInfo()
  }
}
</script>
<style lang="scss" scoped>
.footer-margin {
  text-align: center;
  margin-top: 20px;
}
.bottom-reject-style {
  text-align: center;
}
.reject-style {
  width: 100% !important;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.reject-style /deep/ .el-form-item__content {
  line-height: 40px;
  position: relative;
  font-size: 14px;
  width: 100% !important;
}
.header-search {
  color: #fff;
  background: #1abc9c;
}
/deep/ .avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
/deep/ .avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
/deep/ .avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
/deep/ .avatar {
  width: 178px;
  height: 178px;
  display: block;
}
.header-unitname {
  width: 100% !important;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
/deep/.el-form--inline .el-form-item__content {
  display: inline-block;
  vertical-align: top;
  width: 100% !important;
}
.container-auditDetails {
  padding: 20px;
  background: white;
}
</style>

